
/* 动画飞入 */
.anima-fly-in {
    animation: fly-in 0.3s;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes fly-in {
    0% {
        opacity: .5;
        -webkit-transform: scale(0.5) translate3d(0, 0.5rem, 0);
        transform: scale(0.5) translate3d(0, 0.5rem, 0);
    }

    45% {
        opacity: 1;
        -webkit-transform: scale(1.05) translate3d(0, -0.5rem, 0);
        transform: scale(1.05) translate3d(0, -0.5rem, 0);
    }

    to {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
    }
}

/* 动画插入 */
.anima-punch-in {
    animation: punch-in 0.3s;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes punch-in {
    from {
        opacity: 0.01;
        transform: scale(1.35);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 动画放大 */
.anima-out-in {
    animation: zoom-in 0.3s;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes zoom-in {
    from {
        opacity: 0.01;
        transform: scale(0.75);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 动画滑上 */
.anima-slide-up {
    animation: slide-up .3s 1;
}

@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 动画淡出 */
.anima-fade {
    animation: fade .3s 1;
}

@keyframes fade {
    from {
        opacity: 0.01;
    }

    to {
        opacity: 1;
    }
}
